<template>
	<div class="nav_block">
		<img class="top_left" src="../assets/logo-ielts.jpg" />
		<div class="nav">
			<div class="nav_left">
				<div v-for="(item, index) in state.navList" :key="index" class="nav_left_item"
					:class="{ select: state.hoverIndex == index || state.selectIndex == index }"
					id="video_ielts_writing" @mouseenter="navHover(index)" @mouseleave="navOut(index)"
					@click="navChange(index)">
					<div class="nav_left_item_top">
						<span>{{ item.name }}</span>
						<!-- <img src="../assets/triangle.png" v-if="item.child.length" /> -->
					</div>
					<ul class="menu_ul" v-if="item.child.length && state.hoverIndex == index">
						<li v-for="(v, k) in item.child" @click.stop="navChangeS(index, k+1)" :key="k">
							{{ v }}
						</li>
					</ul>
				</div>
			</div>
			<div class="nav_right">
				<div class="right_one" v-if="!state.isLogin" @click="goLogin">
					注册/登录
				</div>
				<template v-else>
					<div class="right_one" @click="buyVip">会员充值</div>
					<div class="right_three" @mouseenter="accoutHover()" @mouseleave="accoutOut()">
						<img class="picImg" src="../assets/logo.png" />
					</div>
				</template>
				<div class="modelbox" @mouseenter="accoutHover()" @mouseleave="accoutOut()" v-if="state.isShow">
					<img class="picImg" src="../assets/logo.png" />
					<div class="baseifo">
						<div>name:{{ state.userInfo.phoneNumber }}</div>
						<div>ID:{{ state.userInfo.id }}</div>
					</div>
					<div class="logout" @click="logout">退出登陆</div>
				</div>
			</div>
		</div>

		<div id="newOrOldExpireModal" class="modal fade in" style="display: block;" v-if="state.modalShow">
			<div class="modal-dialog modal-sm" style="width: 520px; margin-top: 15%;">
				<div class="modal-content">
					<div class="modal-body">
						<img src="../assets/close.png" class="closeimg" @click="closeModel" />
						<h3 class="cls-title" style="font-weight: bold;">{{ state.isShowCode?'微信支付':'全站会员' }} </h3>
						<div style="text-align: center; padding-top: 14px;width:100%" v-if="!state.isShowCode">
							<div class="vipPriceList">
								<div :class="state.currentIndex == index?'activeItem':'pricecItem'"
									v-for="(item,index) in state.vipList" :key="index" @click="selectVip(item,index)">
									<div class="itemtop">{{ item.memberType_dictText }}</div>
									<div class="itemcenter"><span>￥</span>{{ item.price }}</div>
									<div class="itembottom">有效期：{{ item.memberDays }}天</div>
								</div>
							</div>
						</div>
						<div class="cls-btn1" @click="tobeVIP()" style="background: rgb(255, 75, 64); margin-top: 20px;"
							v-if="!state.isShowCode">
							成为会员
						</div>
						<img :src="state.payCode" style="width:400px;height:400px" v-if="state.isShowCode" />
						<!-- <div></div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="modal-backdrop fade in" v-if="state.modalShow"></div>
	</div>
</template>
<script setup>
	import {
		onBeforeMount,
		onMounted,
		onBeforeUnmount,
		onUnmounted,
		getCurrentInstance
	} from "vue";
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	import {
		reactive,
		ref
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const emit = defineEmits(['changeNavS'])
	const state = reactive({
		currentIndex: 0,
		modalShow: false,
		vipList: [],
		isShow: false,
		userInfo: '',
		isLogin: false,
		hoverIndex: -1,
		selectIndex: 0,
		navList: [{
				name: '首页',
				url: 'Index',
				child: [],
			},
			{
				name: '听力Listening',
				url: ['/home/ReferenceQuestion', '/home/TestQuestions'],
				child: ['剑雅真题', '考场真题'],
			},
			{
				name: '阅读Reading',
				url: ['/home/ReadA', '/home/ReadG', '/home/ReadTrueA'],
				child: ['剑雅真题（A类）', '剑雅真题（G类）', '考场真题（A类）'],
			},
			{
				name: '写作Writing',
				url: ['/home/WhriteTopic', '/home/WritingQuestion'],
				child: ['剑雅真题（A类）', '考场真题（A类）'],
			},
			{
				name: '口语Speaking',
				url: ['/home/Speech', '/home/SpeechMockExam'],
				child: ['口语题库', '口语模考'],
			},
			// {
			// 	name: '模考测试',
			// 	url: ['/home/PackageA', '/home/ThreePackageA'],
			// 	child: ['单科测试', '三科测试'],
			// },
			{
				name: '视频课程',
				child: [],
			},
		],
		payCode: '',
		isShowCode: false
	})
	onMounted(() => {
		let currentPath = proxy.$router.currentRoute._value.path
		let selectIndex = sessionStorage.getItem('selectIndex') || 0
		state.selectIndex = selectIndex
		if (localStorage.getItem('token')) {
			state.isLogin = true
			state.navList = [{
					name: '首页',
					url: 'Index',
					child: [],
				}, {
					name: '个人中心',
					url: 'StudyCenter',
					child: [],
				},
				{
					name: '听力Listening',
					url: ['/home/ReferenceQuestion', '/home/TestQuestions'],
					child: ['剑雅真题', '考场真题'],
				},
				{
					name: '阅读Reading',
					url: ['/home/ReadA', '/home/ReadG', '/home/ReadTrueA'],
					child: ['剑雅真题（A类）', '剑雅真题（G类）', '考场真题（A类）'],
				},
				{
					name: '写作Writing',
					url: ['/home/WhriteTopic', '/home/WritingQuestion'],
					child: ['剑雅真题（A类）', '考场真题（A类）'],
				},

				{
					name: '口语Speaking',
					url: ['/home/Speech', '/home/SpeechMockExam'],
					child: ['口语题库', '口语模考'],
				},
				// {
				// 	name: '模考测试',
				// 	url: ['/home/PackageA', '/home/ThreePackageA'],
				// 	child: ['单科测试', '三科测试'],
				// },
				{
					name: '视频课程',
					child: [],
				},
			]
			state.userInfo = JSON.parse(localStorage.getItem('userInfo'))
		}

		state.navList.forEach(function(item, index) {
			if (item.url && item.url.includes(currentPath)) {
				state.selectIndex = index
				sessionStorage.setItem('selectIndex', state.selectIndex)
			}
		})
	});


	function selectVip(item, index) {
		state.currentIndex = index
		state.orderType = item.memberType
	}

	function closeModel() {
		state.modalShow = false;
		state.isShowCode = false;
	}

	function buyVip() {
		getvipList()
		state.modalShow = true;
	}

	function tobeVIP() {
		proxy.$http.post('/boot/user/order/add', {
			"orderType": state.orderType,
			"delFlag": 0
		}).then(res => {
			if (!res.data.success) {
				alert(res.data.message)
			} else {
				state.orderId = res.data.result
				getpayCode(state.orderId)
			}
		})
	}

	function getpayCode(orderId) {
		proxy.$http.postForm('/boot/pay/wxpay/nativePay', {
			orderId: orderId,
		}).then(res => {
			if (!res.data.success) {
				alert(res.data.message)
			} else {
				state.payCode = res.data.result
				state.isShowCode = true;
			}
		})
	}


	function getvipList() {
		proxy.$http.get('/boot/api/memberConfig/list').then(res => {
			if (!res.data.success) {
				alert(res.data.message)
			} else {
				state.vipList = res.data.result.records
			}
		})
	}

	function logout() {
		localStorage.removeItem('userInfo')
		localStorage.removeItem('token')
		router.push('Index')
		setTimeout(function() {
			location.reload()
		}, 300)
	}

	function accoutHover() {
		state.isShow = true;
	}

	function accoutOut() {
		state.isShow = false;
	}

	function goLogin() {
		window.open('/#/Login?showType=1', '_blank');
	}

	function navHover(index) {
		state.hoverIndex = index
	}

	function navOut() {
		state.hoverIndex = -1
	}

	function navChange(index) {
		sessionStorage.setItem('selectIndex', index)
		if (state.navList[index].child.length) {} else {
			if (state.navList[index].name == '视频课程') {
				window.open('https://www.tuyaedu.com')
				return
			}
			state.selectIndex = index
			router.push(state.navList[index].url)
		}
	}

	function navChangeS(index, k) {
		sessionStorage.setItem('selectIndex', index)
		state.selectIndex = index
		router.push(state.navList[index].url[k - 1])
	}
	// navChange(0)
</script>

<style scoped lang="scss">
	.vipPriceList {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.pricecItem {
			width: 150px;
			height: 150px;
			background: #F5F7FA;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			cursor: pointer;

			.itemtop {
				font-family: SourceHanSansCN-Regular;
				font-size: 14px;
				color: #666666;
				text-align: center;
				padding: 0px 0 10px 0;
			}

			.itemcenter {
				font-family: Arial-BoldMT;
				font-size: 38px;
				color: #333333;
				letter-spacing: 0;
				font-weight: 600;

				span {
					font-size: 14px;
					color: #333333;
				}
			}

			.itembottom {
				font-family: SourceHanSansCN-Regular;
				font-size: 13px;
				color: #999999;
				text-align: center;
				padding-top: 15px;
			}

		}


		.activeItem {
			width: 150px;
			height: 150px;
			background: #FFEFEE;
			border: 1px solid #FF4B40;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			cursor: pointer;


			.itemtop {
				font-family: SourceHanSansCN-Regular;
				font-size: 14px;
				color: rgb(255, 77, 79);
				text-align: center;
				padding: 0px 0 10px 0;
			}

			.itemcenter {
				font-family: Arial-BoldMT;
				font-size: 38px;
				color: rgb(255, 77, 79);
				letter-spacing: 0;
				font-weight: 600;

				span {
					font-size: 14px;
					color: rgb(255, 77, 79);
				}
			}

			.itembottom {
				font-family: SourceHanSansCN-Regular;
				font-size: 13px;
				color: rgb(255, 77, 79);
				text-align: center;
				padding-top: 15px;
			}

		}
	}

	.router_a {
		color: #fff;
		text-decoration-line: none;
	}

	.nav_block {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		background-color: #ffffff;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.5) inset;

		.top_left {
			width: 200px;
			height: 39px;
			padding-right: 10px;
			margin-right: 5px;
		}

		.nav {
			width: 1300px;
			display: flex;
			height: 80px;
			justify-content: space-between;

			.nav_right {
				width: 256px;
				display: flex;
				justify-content: end;
				align-items: center;
				font-family: "arial", "微软雅黑", generic-family;
				font-size: 13px;
				color: #000;
				position: relative;

				.modelbox {
					width: 300px;
					height: 100px;
					border: 1px solid #cccccc;
					display: flex;
					align-items: center;
					justify-content: space-around;
					position: absolute;
					top: 60px;
					left: 100px;
					background-color: #ffffff;

					.logout {
						color: rgb(247, 158, 28);
						cursor: pointer;
					}
				}

				.right_one {
					align-items: center;
					// width: 117px;
					display: flex;
					cursor: pointer;

					img {
						width: 23px;
						height: 23px;
						margin: 0 5px 0 7px;
					}
				}

				.right_three {
					width: 44px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;

					.picImg {
						width: 36px;
						height: 32px;
						border-radius: 50%;
					}
				}
			}

			.nav_left {
				font-size: 15px;
				color: #000000;
				display: flex;

				.nav_left_item {
					margin-right: 6px;
					cursor: pointer;
					width: 120px;
					height: 80px;
					line-height: 80px;
					text-align: center;
					display: flex;
					flex-direction: column;
					font-weight: 900;

					.nav_left_item_top {
						display: flex;
						align-items: center;
						justify-content: center;

						img {
							width: 14px;
							height: 14px;
							margin-left: 2px;
						}
					}

					.menu_ul {
						margin-top: 40px;
						position: absolute;
						top: 40px;
						/*border: 1px solid #ff4b40;*/
						background-color: #383838;
						z-index: 9999;
						box-shadow: 10px 10px 30px rgb(239 231 231 / 20%);
						box-shadow: rgb(197 196 196) 0px 3px 3px;
						text-align: left;
						min-width: 100px;
						list-style-type: none;

						li {
							color: white;
							padding-left: 5px;
							list-style: none;
						}

						li>.active {
							color: #ff4b40;
						}

						li:hover {
							background-color: #2a2929;
						}
					}
				}

				.select {
					border-bottom: 4px solid rgb(247, 158, 28);
					// background-color: rgb(247, 158, 28);
				}
			}
		}
	}

	.top_block {
		height: 120px;
		line-height: 120px;
		background-color: #fff;
		width: 98%;
		max-width: 1300px;
		margin: 0px auto;
		display: flex;
		align-items: center;



		.top_right {
			.sp_d {
				display: inline-block;
				border-left: 2px solid #949292;
				height: 40px;
				vertical-align: middle;
			}

			span {
				font-size: 23px;
				font-family: "Microsoft YaHei", 微软雅黑;
				color: #1f1d1d;
				vertical-align: middle;
				padding-left: 10px;
				margin-left: 6px;
			}
		}
	}

	.modal-body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.closeimg {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 10px;
	}
</style>